<template>
	<view class="my">
		<!-- 头部 -->
		<view class="heades">
			<view v-if="showDiv" class="">
				<view class="portrait">
					<!-- <u-avatar :src="userInfo.avatar" shape="circle"></u-avatar> -->
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<text class="userName">{{userInfo.userName}}</text>
			</view>
			<view @click="toLogindex()" v-if="showLogin" class="ljLogin">
				立即登录
			</view>
		</view>
		<!-- 内容 -->
		<view class="management">
			<view class="bannder">
				<view class="classification" @click="buttonClick()">
					<view class="classificationImg">
						<image src="" mode=""></image>
					</view>
					<text>我的足迹</text>
				</view>
				<view class="classification" @click="toShpucang()">
					<view class="classificationImg">
						<image src="" mode=""></image>
					</view>
					<text>我的收藏</text>
				</view>
				<view @click="toSetup()" class="classification" style="margin-left: 124rpx;">
					<view class="classificationImg">
						<image src="" mode=""></image>
					</view>
					<text>设置</text>
				</view>
			</view>
			<!-- 我的服务 -->
<!-- 			<view class="orderList rebate">
				<view class="orderBox">
					<view class="orderIcon">
						<image src="" mode=""></image>
					</view>
					<text>我的返利(元)</text>
					<view @click="toTixian()" class="reflect">
						立即提现
					</view>
				</view>
				<view class="line"></view>
				<view style="padding: 0 24rpx 0 30rpx;">
					<view class="myOrder">
						<view class="myOrderlist">
							<view class="myOrderimg">
								<text>9.9</text>
							</view>
							<text class="allStyle">可提现</text>
						</view>
						<view class="myOrderlist">
							<view class="myOrderimg">
								<text>9.9</text>
							</view>
							<text class="allStyle">待入账</text>
						</view>
						<view class="myOrderlist">
							<view class="myOrderimg">
								<text>9.9</text>
							</view>
							<text class="allStyle" >已提现</text>
						</view>
						<view class="withdrawal">
							<image src="" mode=""></image>
							<text>立即提现</text>
						</view>
					</view>
				</view>
			</view> -->
<!-- 			<view class="orderList">
				<view class="orderBox">
					<view class="orderIcon">
						<image src="" mode=""></image>
					</view>
					<text>我的服务</text>
				</view>
				<view class="line"></view>
				<view class="myOrder">
					<view class="myOrderlist">
						<view class="myOrderimg">
							<image src="" mode=""></image>
						</view>
						<text>客服</text>
					</view>
					<view class="myOrderlist" @click="service()">
						<view class="myOrderimg">
							<image src="" mode=""></image>
						</view>
						<text>客服微信</text>
					</view>
					<view class="myOrderlist">
						<view class="myOrderimg">
							<image src="" mode=""></image>
						</view>
						<text>分享好友</text>
					</view>
				</view>
			</view> -->
		</view>
<!-- 		<u-popup mode="center" :show="show" @close="close" @open="open">
			<view>
				<text>出淤泥而不染，濯清涟而不妖dsadasdasddddddddddddddddddddddd</text>
			</view>
		</u-popup>
		<u-button @click="show = true">打开</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				showDiv: true,
				showLogin: true,
				loadingStatus: true,
				show: false,
			}
		},
		onLoad() {
			 this.userInfo = uni.getStorageSync('userInfo');
			 this.yzToken();
		},
		methods: {
			// open() {
			//           // console.log('open');
			//         },
			//  close() {
			//           this.show = false
			//           // console.log('close');
			//         },
			yzToken() {
				if(!this.userInfo.token) {
					this.showDiv = false;
					this.showLogin = true;	
				} else {
					this.showDiv = true;
					this.showLogin = false;		
				}
			},
			buttonClick() {
				if(!this.userInfo.token) {
					uni.reLaunch({
						url: '../login/login',
					})
				} else {
					uni.navigateTo({
						url: './footprint/footprint',
					})
				}
			},
			toLogindex() {
				uni.reLaunch({
					url: '../login/login',
				})
			},
			toShpucang() {
				uni.switchTab({
					url: '../tabbar-4/collection',
				})
			},
			toSetup() {
				if(!this.userInfo.token) {
					uni.reLaunch({
						url: '../login/login',
					})
				} else {
					uni.navigateTo({
						url: './setup/setupIndex',
					})
				}
			},
			toTixian() {
				uni.showModal({
				    title: '提示',
				    content: '暂未开放，敬请期待',
				    success: function (res) {
				        if (res.confirm) {
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				// uni.navigateTo({
				// 	url: './withdrawalMoney/withdrawal',
				// })
			},
			service() {
				uni.showModal({
				    title: '提示',
				    content: '客服微信  38388338',
					confirmText: "复制",
					showCancel: false,
				    success: function (res) {
				        if (res.confirm) {
							uni.setClipboardData({
							  data:'38388338',//要被复制的内容
							  success:()=>{//复制成功的回调函数
							    uni.showToast({//提示
							      title:'复制成功',
								icon: 'none'
							    })
							  }
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }		
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		image {
			width: 100%;
			height: 100%;
		}
		.heades {
			width: 100%;
			height: 490rpx;
			background-color: #F25F5F;
			// position: relative;
			.userName {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				padding-top: 28rpx;
			}
			.portrait {
				width: 128rpx;
				height: 128rpx;
				text-align: center;
				padding: 120rpx 310rpx 0 312rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.ljLogin {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				border: 2rpx solid #DD524D;
				border-radius: 8rpx;
				position: relative;
				left: 38%;
				top: 35%;
			}
		}
		.management {
			padding: 0 40rpx;
			.bannder {
				display: flex;
				width: 100%;
				height: 188rpx;
				background: url(../../../static/img/my/bandner.png) no-repeat;
				background-size: cover;
				margin-top: -120rpx;
				padding: 32rpx 72rpx 0 72rpx;
				box-sizing: border-box;
				.classification {
					text-align: center;
					margin-left: 98rpx;
					.classificationImg {
						width: 56rpx;
						height: 56rpx;
						margin: 0 auto;
					}
					text {
						display: block;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						padding-top: 28rpx;
					}
				}
				.classification:nth-child(1) {
					margin-left: 0;
				}
			}
			.rebate {
				.myOrderlist {
					.myOrderimg {
						width: auto !important;
						height: auto !important;
						text {
							font-size: 44rpx !important;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600 !important;
							color: #333333 !important;
							line-height: 60rpx !important;
							padding-top: 20rpx !important;
						}
					}
					.allStyle {
						padding-top: 20rpx !important;
					}
				}
				.myOrder {
					padding: 0 12rpx !important;
				}
				.reflect {
					width: 118rpx;
					height: 40rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 10rpx;
					background-color: #F25F5F;
					margin-left: 252rpx;
				}
			}
			.orderList {
				height: 280rpx;
				background: url(../../../static/img/my/order.png) no-repeat;
				background-size: cover;
				margin: -95rpx 0 28rpx 0;
				.orderBox {
					display: flex;
					padding: 24rpx 40rpx;
					.orderIcon {
						width: 36rpx;
						height: 40rpx;
					}
					text {
						display: block;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						margin-left: 20rpx;
					}
				}
				.line {
					width: 594rpx;
					margin: 0 auto;
					border: 1px dashed #979797;
				}
				.myOrder {
					display: flex;
					width: 594rpx;
					box-sizing: border-box;
					.myOrderlist {
						text-align: center;
						margin-left: 80rpx;
						.myOrderimg {
							width: 50rpx;
							height: 56rpx;
							margin: 0 auto;
						}
						text {
							display: block;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 40rpx;
							padding-top: 28rpx;
						}
					}
					.myOrderlist:nth-child(1) {
						margin-left: 0;
					}
					.myOrderlist:nth-child(2) {
						.myOrderimg {
							width: 54rpx;
							height: 60rpx;
						}
					}
					.withdrawal {
						width: 118rpx;
						height: 120rpx;
						background: #F25F5F;
						box-shadow: 0px 6px 6px 1px #F3B5B5;
						border-radius: 10rpx;
						text-align: center;
					}
				}
			}
		}
	}

	/deep/ .u-avatar {
		width: 128rpx !important;
		height: 128rpx !important;
	}
	/deep/ .u-avatar__image {
		width: 128rpx !important;
		height: 128rpx !important;
	}
</style>
